@for $i from 0 through 500 {
  .gap#{$i} {
    gap: 1rem * $i;
  }
  .f#{$i} {
    flex: $i;
  }
  .radius#{$i} {
    border-radius: 1rem * $i;
  }
  .w#{$i} {
    width: 1rem * $i !important;
  }
  .w#{$i}p {
    width: 1% * $i;
  }
  .h#{$i} {
    height: 1rem * $i !important;
  }
  .h#{$i}p {
    height: 1% * $i !important;
  }
  .lh#{$i} {
    line-height: 1rem * $i;
  }
  .fs#{$i} {
    font-size: 1rem * $i;
  }
  .fs-h#{$i} {
    font-size: 1rem * $i;
  }
  .mt#{$i} {
    margin-top: 1rem * $i;
  }
  .mt-#{$i} {
    margin-top: -1rem * $i;
  }
  .mb#{$i} {
    margin-bottom: 1rem * $i;
  }
  .ml#{$i} {
    margin-left: 1rem * $i;
  }
  .mr#{$i} {
    margin-right: 1rem * $i;
  }
  .p#{$i} {
    padding: 1rem * $i;
  }
  .pt#{$i} {
    padding-top: 1rem * $i;
  }
  .pb#{$i} {
    padding-bottom: 1rem * $i;
  }
  .pl#{$i} {
    padding-left: 1rem * $i;
  }
  .pr#{$i} {
    padding-right: 1rem * $i;
  }
  .br#{$i} {
    border-radius: 1rem * $i !important;
  }
  .ls#{$i} {
    letter-spacing: 1rem * $i !important;
  }
  .b-b#{$i} {
    border-bottom: 1rem * $i solid var(--theme-border-color);
  }
  .b-t#{$i} {
    border-top: 1rem * $i solid var(--theme-border-color);
  }
  .b-r#{$i} {
    border-right: 1rem * $i solid var(--theme-border-color);
  }
  .b-l#{$i} {
    border-left: 1rem * $i solid var(--theme-border-color);
  }
}

@for $i from 1 through 10 {
  .fw#{$i}00 {
    font-weight: $i * 100 !important;
  }
}

@for $i from 1 through 10 {
  .z#{$i*10} {
    position: relative;
    z-index: $i * 10 !important;
  }
}

.text-hidden {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.of-c {
  object-fit: contain;
}

.ta-r {
  text-align: right;
}

.cur-p {
  cursor: pointer;
}

.d-f {
  display: flex;
}

.d-if {
  display: inline-flex;
}

.fw-w {
  flex-wrap: wrap;
}

.fd-c {
  flex-direction: column;
}

.jc-sb {
  justify-content: space-between;
}

.jc-c {
  justify-content: center;
}

.jc-fe {
  justify-content: flex-end;
}

.ai-c {
  align-items: center;
}

.fw-b {
  font-weight: bolder;
}

.ws-pw {
  white-space: pre-wrap;
}

.wb-ba {
  word-break: break-all;
}

.t-nw {
  white-space: nowrap;
}
